Информационный ресурс для пользователей сайтов
созданных на системе управления сайтом TSAdmin

 

Как разместить PDF файл в окне внутри страницы

10 февраля 2021

Советы

Нас часто спрашивают "Как сделать так, чтобы PDF файл можно было посмотреть внутри страницы без скачивания". Рассмотрим как вставить документ PDF (пдф) в страницу сайта в текстовом редакторе в системе управления сайтами TSAdmin с помощью iframe.
 
Пример размещения PDF файла внутри страницы:
 
 
Итак, вам понадобится: PDF файл и вот такой код:
 
 
Порядок действий:
 
Выбираем PDF файл, который хотим разместить на странице, или несколько файлов если необходимо разместить несколько. 
 
Т.к. файлы будут размещаться напрямую на сервер и необходимо будет указывать прямую ссылку на файл, чтобы все работало корректно, вам необходимо переименовать файлы латинскими буквами (английскими буквами). Так же допустимо использование цифр и символов "тире" (-) и "подчеркивание (земля)" (_). Избегайте использования заглавных букв, пишите все строчными.
 
Пример переименования файлов:
 
 
Мы вас предупредили, если вы все разместили и у вас что то не работает, начните проверку с этого пункта.
 
Далее, входим в систему управления сайтом и переходим в раздел "Файлы (Файловый менеджер)".
 
 
Переходим в подраздел "Показать файлы".
 
 
Выбираем папку, в которую будем размещать PDF файл(ы) или создаем новую и нажимаем "Загрузить файл". 
 
Не стоит размещать все файлы в одну папку по умолчанию, в какой то момент она будет содержать такое оргомное кол-во файлов, что открытие файлового менеджера будет занимать несколько минут или вообще станет невозможным. Раскладывайте файлы по разным папкам, так вам самим проще будет ориентироваться, когда все файлы отсортированы.
 
 
В открывшемся окне выбираем на компьютере один или несколько PDF файлов, которые планируете использовать.
 
 
Выбрав файлы, нажимаем "Открыть".
 
 
Загруженные файлы появляются в окне файлового менеджера.
 
 
Переходим к следующему этапу, открываем раздел "Структура сайта" (если необходимо разместить на странице, а не в публикации. Для публикаций порядок аналогичный) и выбрав страницу, на которой будем размещать PDF файл, кликаем "Редактировать" под ее названием.
 
 
На странице, в текстовом редакторе находим и нажимаем кнопку "Источник" для переключения на исходный код.
 
 
Копируем данный код (на нашем сайте на этой странице или в другом месте если вы где то сохраняли):
 
 
Возвращаемся в открытый текстовой редактор и в выбранном месте вставляем скопированный код:
 
 
Сохраните.
 
 
Далее нам нужно прописать путь до файла и настроить размеры окна. Приступим:
 
Чтобы получить путь до загруженного PDF файла, переключите редактор обратно на функциональный режим нажав кнопку "Источник" (если этого не произошло при сохранении страницы). Находим в функциональной версии текстового редактора значок "Ссылка" и кликаем на него.
 
 
В открывшемся окне кликаем "Выбрать на сервере".
 
 
Выбираем папку, в которой размещен нужный PDF файл.
 
 
Выбираем файл и кликаем по нему левой клавишей мыши 2 раза.
 
 
Мы видим, что нас вернуло на предыдущее окно и в поле ссылки появился путь до файла, выделяем его и копируем.
 
 
Закрываем это окно, т.к. оно нам больше не нужно. Для закрытия кликните "крестик" сверху или "Отмена" снизу окна.
 
 
Снова текстовой редактор переключаем на "источник", находим установленный нами код и в нужном месте вставляем путь к файлу.
 
 
Сохраняем.
 
Обращаем ваше внимание на то, что после установки фрейма в текстовом редакторе, он может не отображаться в функциональной версии текстового редактора, или отображаться таким образом:
 
 
Это нормально, это особенности фреймов и текстового редактора, редактор просто не может отобразить интерактивный элемент, он не предназначен для этого, в нем происходит редактирование и управление информацией на странице.
 
После того как вы все прописали и сохранили, проверьте что у вас получилось, перейдите на страницу, кликните для этого кнопку "Открыть на сайте".
 
 
Окно вывода документа можно настроить, задать его высоту и ширину. Для этого переключите текстовой редактор на "Источник" и внесите изменения в полях height и width.
 
 
heigh - это высота окна,
width - это ширина окна, если нужен фиксированный размер, введите точное значение, если вам необходимо чтобы окно растягивалось по ширине страницы, укажите 100% (например: width="100%").
 
 
Поэкспериментируйте, посмотрите на сайте как меняется окно с документом на странице сайта.
 
Если вы сделали все верно, у вас должно получиться примерно так:
 
 

Или так (с фиксированной шириной и небольшой высотой):

 
 

Вставить последующие документы можно ниже (или выше) аналогичным способом.

 

Всё просто!


9 просмотров этой страницы
На сайте тсадмин.рф мы не собираем и не храним никакую информацию без вашего согласия.
Cookie используются для сбора статистики и информации технического характера и хранятся на вашем устройстве. Скрыть
Наверх страницы